﻿    <!-- jqueryJs home页使用-->
<link href="Resources/js/easyui/extension/jquery.portal.css" rel="stylesheet" type="text/css" />
<script src="Resources/js/easyui/extension/jquery.portal.js" type="text/javascript"></script>
<!-- highchartsJs -->
<script src="Resources/js/highcharts/highcharts.js" type="text/javascript"></script>
<script src="Resources/js/highcharts/modules/exporting.js" type="text/javascript"></script>

<style type="text/css">
    #portal-panel {
        position: relative;
        overflow: hidden;
        padding: 5px 0;
    }

    .portals {
        width: 33%;
    }

    .portalTitle {
        width: 98%;
        height: 10%;
        border: 1px solid #e6e6e6 !important;
        border-left: 5px solid #e2e2e2 !important;
    }

        .portalTitle:hover {
            background: #f2f2f2 !important;
        }

    .portal .portal-panel {
        padding-bottom: 10px;
        margin: 0;
    }

    #portal-panel .panel-title {
        padding-left: 16px !important;
        line-height: 24px !important;
    }

    #portal-panel .panel-header {
        background: #f2f2f2 !important;
        border: none !important;
        border-left: 5px solid #7bbfea !important;
    }

    .panel-box {
        width: 100%;
        min-width: 1144px;
        height: 70px;
        padding: 10px 0;
    }

        .panel-box ul {
            width: 98%;
            overflow: hidden;
            padding: 0 1%;
            margin: 0;
        }

        .panel-box li {
            width: 15%;
            min-width: 170px;
            height: 70px;
            background: #f2f2f2;
            list-style: none;
            border-radius: 6px;
            -ms-border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -o-border-radius: 6px;
            cursor: pointer;
            float: left;
            margin-right: 1.6%;
        }

    .panel-icons {
        width: 44%;
        height: 70px;
        border-radius: 6px 0 0 6px;
        float: left;
    }

        .panel-icons > div {
            width: 40px;
            height: 40px;
            margin: 15px auto;
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
            -ms-transition: All 0.4s ease-in-out;
        }

        .panel-icons img {
            width: 100%;
            height: 100%;
        }

    .panel-word {
        width: 56%;
        float: left;
        text-align: center;
        margin-top: 10px;
        color: #888;
    }

        .panel-word:hover {
            color: #000;
        }

        .panel-word span {
            font-size: 25px;
            display: block;
            height: 30px;
            line-height: 30px;
        }

        .panel-word p {
            margin: 0;
            padding: 0;
            font-size: 16px;
            display: block;
            font-style: normal;
        }

    .color-blue {
        background: #7bbfea;
    }

    .panel-icons div:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
</style>

<div class="panel-box">
    <ul>
        <li>
            <a>
                <div class="panel-icons" style="background: #7bbfea;">
                    <div>
                        <img src="Resources/img/home/infor.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>5</span>
                    <p>新消息</p>
                </div>
            </a>
        </li>
        <li>
            <a>
                <div class="panel-icons" style="background: #f17c67;">
                    <div>
                        <img src="Resources/img/home/add_user.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>3</span>
                    <p>新增人数</p>
                </div>
            </a>
        </li>
        <li>
            <a>
                <div class="panel-icons" style="background: #00EBC0;">
                    <div>
                        <img src="Resources/img/home/user_number.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>10</span>
                    <p>用户总数</p>
                </div>
            </a>
        </li>
        <li>
            <a>
                <div class="panel-icons" style="background: #2A8FBD;">
                    <div>
                        <img src="Resources/img/home/img_number.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>31</span>
                    <p>图片总数</p>
                </div>

            </a>
        </li>
        <li>
            <a>
                <div class="panel-icons" style="background: #b69968;">
                    <div>
                        <img src="Resources/img/home/file.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>13</span>
                    <p>待审核文章</p>
                </div>
            </a>
        </li>
        <li style="margin-right:0;">
            <a>
                <div class="panel-icons" style="background: #6B6575;">
                    <div>
                        <img src="Resources/img/home/file_number.png" />
                    </div>
                </div>
                <div class="panel-word">
                    <span>30</span>
                    <p>文章总数</p>
                </div>
            </a>
        </li>
    </ul>
</div>

<div id="portal-panel">
    <div class="portals">
        <div class="portalTitle" title="某地区降水量">
            <div id="columnChart" style="min-width: 310px; height: 390px; margin: 0 auto"></div>
        </div>
    </div>
    <div class="portals">
        <div class="portalTitle" title="未来一周气温变化">
            <div id="brokenLineChart" style="min-width: 310px; height: 390px; margin: 0 auto"></div>
        </div>
    </div>
    <div class="portals">
        <div class="portalTitle" title="某站点用户访问来源">
            <div id="cakeChart" style="min-width: 310px; height: 390px; margin: 0 auto"></div>
        </div>
    </div>

</div>
<script>
    $(function () {
        $('#portal-panel').portal({
            border: false,
            fit: false
        });
        var height = $("#portal-panel").height();
        $(".portals").css("height", height);
        $('#portal-panel').css({ "width": "100%", "height": "80%" });
        //柱状图
        $('#columnChart').highcharts({
            title: {
                text: null
            },
            chart: {
                type: 'column',
                backgroundColor: null,
                style: { fontFamily: "Dosis, sans-serif" }
            },
            xAxis: {
                categories: [
                    '一月',
                    '三月',
                    '五月',
                    '七月',
                    '九月',
                    '十一月'
                ],
                crosshair: true,
                gridLineWidth: 1,
                labels: {
                    style: { fontSize: "12px" }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'mm'
                },
                minorTickInterval: "auto",
                labels: { style: { fontSize: "12px" } }

            },
            tooltip: {
                borderWidth: 0,
                backgroundColor: "rgba(219,219,216,0.8)",
                shadow: !1
            },
            legend: {
                itemStyle: { fontWeight: "bold", fontSize: "13px" },
                borderWidth: 0,
                symbolHeight: 12,
                symbolWidth: 12,
                symbolRadius: 6
            },
            background2: "#F0F0EA",
            plotOptions: {
                column: {
                    borderWidth: 0
                },
                candlestick: { lineColor: "#404048" }
            },
            series: [{
                name: '东京',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0],
                color: '#7bbfea'
            }, {
                name: '纽约',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5],
                color: '#f17c67'
            }]
        });

        //折线图
        $('#brokenLineChart').highcharts({
            chart: {
                type: null,
                backgroundColor: null,
                style: { fontFamily: "Dosis, sans-serif" }
            },
            title: {
                text: '月平均气温'
            },
            xAxis: {
                categories: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                title: {
                    text: '气温 (°C)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true // 开启数据标签
                    },
                    enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                }
            },
            legend: {
                itemStyle: { fontWeight: "bold", fontSize: "13px" },
                borderWidth: 0,
                symbolHeight: 12,
                symbolWidth: 12,
                symbolRadius: 6
            },
            colors: "#f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee".split(" "),
            series: [{
                name: '东京',
                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 22.1]
            }, {
                name: '伦敦',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 16.2]
            }]

        });

        //饼状图
        $('#cakeChart').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                backgroundColor: null,
                style: { fontFamily: "Dosis, sans-serif" }
            },
            title: {
                text: null
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            legend: {
                itemStyle: { fontWeight: "bold", fontSize: "13px" },
                borderWidth: 0,
                symbolHeight: 12,
                symbolWidth: 12,
                symbolRadius: 6
            },
            colors: "#f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee".split(" "),
            series: [{
                type: 'pie',
                name: '用户访问来源',
                data: [
                    ['直接访问', 8.5],
                    ['邮件访问', 6.2],
                    ['联盟广告', 0.7],
                    ['视频广告', 1.7],
                    ['搜索引擎', 10]
                ]
            }]
        });
    });
</script>
